<template>
  <view class="settings">
    <view class="settings-content">
      <view class="section-box">
        <view class="section-title"><view class="title">操作</view></view>
        <view class="section-content">
          <view class="operate-btn" v-for="item in dynamicButtons" :key="item.key" @click="doClick(item)">
            {{ item.label }}
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="confirmSendDialog" type="dialog">
      <uni-popup-dialog type="info" cancelText="否" confirmText="是" :content="`确定要${currOperate.label || '操作'}？`" @confirm="sendCmd()"></uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="progressPopup" type="center" :is-mask-click="false">
      <uni-popup-message type="warn" :message="`正在处理中，当前进度${ currProgress }%`" :duration="0"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
import { getGUID } from '@/utils/index.js'
const UPGRADE_TYPE = {
  LAMP: 3
}
export default {
  props: {
    projectInfo: {
      type: Object
    }
  },
  data() {
    return {
      dynamicButtons: [],
      isLoading: false,
      currOperate: null,
      showProgress: false,
      currProgress: 0,
    }
  },
  computed: {
    canEdit() {
      return this.projectInfo.canEdit
    }
  },
  watch: {
    projectInfo() {
      this.initData()
    },
    showProgress() {
      if (this.showProgress) {
        this.$refs.progressPopup.open()
      } else {
        this.$refs.progressPopup.close()
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      if (this.projectInfo?.gateway_id) {
        this.getDynamicButtons()
      }
    },
    getDynamicButtons() {
      const self = this
      uni.request({
        url: '/sys/btns',
        method: 'GET',
        data: {
          uid: self.projectInfo.gateway_id,
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            const arr = []
            result.data.data.forEach((item) => {
              if (!item) return
              const { label = '', check = false, send = {} } = item
              arr.push({
                key: getGUID(),
                label,
                cmd: send.cmd,
                check
              })
            })
            self.dynamicButtons = arr
          }
        }
      })
    },
    doClick(operate) {
      const self = this
      self.currOperate = operate
      self.$refs.confirmSendDialog.open()
    },
    sendCmd() {
      const self = this
      uni.request({
        url: '/gw/cmd',
        method: 'POST',
        data: {
          cmd: self.currOperate.cmd,
          uid: self.projectInfo.gateway_id,
        },
        success(result) {
          if (result.data.success) {
            self.$refs.confirmSendDialog.close()
            if (self.currOperate.check) {
              self.checkProgress()
            } else{
              uni.showToast({
                icon: 'none',
                title: '操作成功'
              })
            }
          }
        },
        fail() {
          uni.hideLoading()
        }
      })
    },
    checkProgress() {
      const self = this
      uni.request({
        url: self.currOperate.check.url,
        method: 'POST',
        noLoading: true,
        data: {
          cmd: self.currOperate.check.cmd,
          uid: self.projectInfo.gateway_id,
        },
        success(result) {
          if (self.currProgress < 100) {
            self.showProgress = true
            self.currProgress += 10
            setTimeout(self.checkProgress, 1000)
          } else {
            self.currProgress = 0
            self.showProgress = false
          }
          if (result.data.success && result.data.type === UPGRADE_TYPE.LAMP) {
            const curr = Math.floor(result.data.offset) || 0
            const total = Math.floor(result.data.len) || 1
            if (total && curr < total) {
              self.showProgress = true
              self.currProgress = (curr / total * 100).toFixed(1)
              setTimeout(self.checkProgress, 1000)
            } else {
              self.showProgress = false
              self.currProgress = 0
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-content {
  padding: 30rpx;
  background-color: $white;
  border-radius: 10rpx;
}
.section-box {
  margin-top: 40rpx;
  &:first-child {
    margin-top: 0;
  }
}
.section-title {
  @include section-title;
}
.section-content {
  margin: 20rpx -20rpx 0;
  display: flex;
  flex-wrap: wrap;
  .operate-btn {
    background-color: $primary;
    color: $white;
    padding: 0 20rpx;
    width: auto;
    min-width: 160rpx;
    height: 72rpx;
    border-radius: 10rpx;
    font-size: $font-size-2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20rpx;
  }
}
</style>
